<template>
  <div class="person">

    <h2>sum值为： {{ sum }}</h2>
    <button @click="sumChange">点击加一</button>
  </div>
</template>
<script setup lang="ts" name="person">
import { ref , onMounted,onBeforeMount, onUpdated, onBeforeUpdate,onBeforeUnmount,onUnmounted} from "vue";
import { type PersonInter, type Persons } from "@/types/index";
let sum = ref(0)
console.log('创建');

const sumChange=()=>{
  sum.value+=1
}
// 卸载前
onBeforeUnmount(()=>{
  // console.log('卸载前');
  
})
// 卸载后
onUnmounted(()=>{
  // console.log('卸载后');
  
})
// 更新后
onUpdated(()=>{
  // console.log('更新完成');
  
})
// 更新前
onBeforeUpdate(()=>{
  // console.log("更新前");
  
})
// 挂载完
onBeforeMount(()=>{
  // console.log("挂在前");
  
})
// 挂载前
onMounted(()=>{
  console.log('子---挂载完成');
  
})


</script>

<style scoped>
button {
  margin: 0 5px;
}
.person {
  border-radius: 10px;
  background-color: #8ee6ea;
  margin: 20px;
}
li {
  font-size: 15px;
}
.person input {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
